<!--
 * @Descripttion:
 * @Author: YuZhenJing
 * @Date: 2020-03-14 11:26:38
 * @LastEditors: YuZhenJing
 * @LastEditTime: 2020-03-23 10:29:27
 -->
<template>
  <ul class="submenu expand-animation" v-if="parentNavData.isOpen == true">
    <li
      :key="subData.funListCode"
      v-for="subData in parentNavData.children"
      :class="{
        active: subData.isActive == true,
        open: subData.isOpen == true
      }"
    >
      <nav-link :data="subData" @handleClick="handleClick">
        <!-- 导航名称 -->
        <span class="menu-text" v-text="subData.funListName"></span>
        <!-- 下拉三角图标  -->
        <span v-if="subData.funListType == 'group'" class="arrow">
          <i class="dropdown-toggle"></i>
        </span>
      </nav-link>
      <template v-if="subData.children != null && subData.children.length != 0">
        <sub-nav-menu :parentNavData="subData" @handleClick="handleClick"></sub-nav-menu>
      </template>
    </li>
  </ul>
</template>
<script>
export default {
  name: 'SubNavMenu',
  props: {
    parentNavData: {
      type: Object,
      required: true
    }
  },
  components: {
    'nav-link': require('./Link.vue').default
  },
  methods: {
    handleClick(nav) {
      this.$emit('handleClick', nav)
    }
  }
}
</script>
